<template>
  <div>
    <div class="pass-box">
      <h3>修改密码</h3>
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label>用户名</label>
          <input @focus="focus" type="text" class="mui-input-clear" placeholder="请输入账户名">
          <span class="mui-icon mui-icon-clear mui-hidden"></span>
        </div>
        <p>{{ username_error_msg }}</p>
        <div class="mui-input-row mui-password">
          <label>原密码</label>
          <input @focus="focus" type="password" class="mui-input-password" placeholder="请输入原密码" data-input-password="3">
          <span class="mui-icon mui-icon-eye"></span>
        </div>
        <p>{{ oringinPass_error_msg }}</p>
        <div class="mui-input-row mui-password">
          <label>新密码</label>
          <input @focus="focus" type="password" class="mui-input-password" placeholder="请输入新密码" data-input-password="3">
          <span class="mui-icon mui-icon-eye"></span>
        </div>
        <p>{{ newPass_error_msg }}</p>
        <div class="mui-input-row mui-password">
          <label>确认新密码</label>
          <input @focus="focus" type="password" class="mui-input-password" placeholder="请再次输入新密码" data-input-password="3">
          <span class="mui-icon mui-icon-eye"></span>
        </div>
        <p>{{ confirm_error_msg }}</p>
        <div class="mui-button-row">
          <button type="submit" class="mui-btn mui-btn-primary" onclick="return false;" @click="changePass">确定</button>&nbsp;&nbsp;
          <button type="reset" class="mui-btn" onclick="return false;" @click="reset">重置</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      timerId: "",
      username_error_msg:"",
      oringinPass_error_msg:"",
      newPass_error_msg:"",
      confirm_error_msg:""
    };
  },
  mounted() {
    mui(".mui-input-row input").input();
  },
  methods: {
    focus() {
      this.username_error_msg = "";
      this.oringinPass_error_msg = "";
      this.newPass_error_msg = "";
      this.confirm_error_msg = "";
    },
    changePass(){
      clearTimeout(this.timerId)
      var username = mui(".mui-input-group input")[0].value;
      var originPass = mui(".mui-input-group input")[1].value;
      var newPass = mui(".mui-input-group input")[2].value;
      var confirm_newPass = mui(".mui-input-group input")[3].value;

      if (!username || username.trim() == "")
        return (this.username_error_msg = "用户名不能为空");
      if (!originPass || originPass.trim() == "")
          return (this.oringinPass_error_msg = "原密码不能为空");
      if (!newPass || newPass.trim() == "")
          return (this.newPass_error_msg = "请输入新密码");
      if (!confirm_newPass || confirm_newPass.trim() == "")
          return (this.confirm_error_msg = "再次输入新密码确认");
      if (newPass !== confirm_newPass)
        return (this.confirm_error_msg = "两次输入的新密码不一致");

      var list = JSON.parse(localStorage.getItem("register")) || [];
      
      list.some(ele => {
        if (ele.name == username && ele.pass == originPass) {
          ele.pass = newPass
          return true;
        } else if (ele.name == username && ele.pass !== originPass){
          return (this.pass_error_msg = "原密码错误");
        }
      });
      localStorage.removeItem("login")
      localStorage.setItem("register", JSON.stringify(list));
        mui.alert("密码修改成功")
        this.timerId = setTimeout(()=>{
          this.$router.push("/member/login")
        },800)
    },
    reset() {
      mui(".mui-input-group input").each(function(){
        this.value = "";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.pass-box{
    h3 {
        margin: 20px;
    }
    p {
    color: red;
    padding-left: 120px;
    margin-bottom: 0;
  }
}
</style>

